<template>
  <div class="circle-nav">
    <div id="circle-plus" @click="toggleFgg"><span class="heng animated"></span><span class="shu animated"></span></div>
    <div id="circle-nav" class="animated">
        <ul class="outer-nav">
            <li v-for="(item, index) in outerList" :key="index"><a href="#" class="animated"><span>{{item}}</span></a></li>
        </ul>
        <ul class="inner-nav">
            <li v-for="(item, index) in innerList" :key="index"><a href="#" class="animated"><span>{{item}}</span></a></li>
        </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
/* eslint-disable */
import autoPrefix from "@/assets/js/common/autoprefix";
export default {
  name: "ArticleGuanZhu",
  data() {
    return {
      fgg: true,
      outerList: ["外导航一", "外导航二", "外导航三", "外导航四", "外导航五", "外导航六", "外导航七", "外导航八", "外导航九"],
      innerList: ["内导航一", "内导航二", "内导航三", "内导航四"]
    };
  },
  components: {},
  computed: {},
  methods: {
    toggleFgg(e) {
      // e.stopPropagation();
      // console.log(e.currentTarget);
      const self = this;
      if (this.fgg === true) {
        e.currentTarget.style.bottom = "1.7rem";
        e.currentTarget.style.background = "#666";
        $(e.currentTarget).find("span.shu").removeClass("rotateIn").addClass("rotateOut");
        $(e.currentTarget).find("span.heng").addClass("rubberBand");
        $("#circle-nav").css("display", "block");
        setTimeout(function () {
          setTimeout(function () {
            $("#circle-nav li").css("opacity", "1");
          }, 1);
          $("#circle-nav").removeClass("bounceOut").addClass("bounceIn");
          $("#circle-nav li a").addClass("bounceInRight").removeClass("bounceOutRight");
          self.fgg = false;
        }, 0)
      } else {
        e.currentTarget.style.bottom = "3.57rem";
        e.currentTarget.style.background = "#6cb7f8";
        $(e.currentTarget).find("span.shu").removeClass("rotateOut").addClass("rotateIn");
        $(e.currentTarget).find("span.heng").removeClass("rubberBand");
        $("#circle-nav").removeClass("bounceIn").addClass("bounceOut");
        $("#circle-nav li a").addClass("bounceOutRight").removeClass("bounceInRight");
        setTimeout(function () {
          $("#circle-nav li").css("opacity", "0");
          $("#circle-nav").css("display", "none");
          self.fgg = true;
        }, 1000)
      }
    },
    roateMove() {

      let transform = autoPrefix('transform')[1];
      var fgg = true;
      var circleNav = document.getElementById("circle-nav");
      var outerNav = document.querySelector("#circle-nav .outer-nav");
      var outerSpan = document.querySelectorAll("#circle-nav .outer-nav span");
      var outerLi = document.querySelectorAll("#circle-nav .outer-nav li");
      var innerSpan = document.querySelectorAll("#circle-nav .inner-nav span");
      var innerLi = document.querySelectorAll("#circle-nav .inner-nav li");
      var listLi = document.querySelectorAll("#circle-nav li");
      for (let i = 0; i < outerLi.length; i++) {
        outerLi[i].style[transform] = "rotate(" + (9 + i * 18) + "deg)";
      };
      for (let i = 0; i < innerLi.length; i++) {
        innerLi[i].style[transform] = "rotate(" + (15 + i * 30) + "deg)";
      };
      for (let i = 0; i < outerSpan.length; i++) {
        outerSpan[i].style[transform] = "rotate(-" + (9 + i * 18) + "deg)";
      };
      for (let i = 0; i < innerSpan.length; i++) {
        innerSpan[i].style[transform] = "rotate(-" + (15 + i * 30) + "deg)";
      };
      for (let i = 0; i < listLi.length; i++) {
        listLi[i].addEventListener('touchstart', touch, false);
        listLi[i].addEventListener('touchmove', touch, false);
        listLi[i].addEventListener('touchend', touch, false);
      };
      var w = document.body.clientWidth;
      // var h = document.body.clientHeight; 获取文档高度
      var h = document.documentElement.clientHeight;
      var startX, endX, moveX;
      var startY, endY, moveY;
      var anglemoveOuter = 0;
      var anglemoveInner = 0;
      var _anglemoveOuter = 0;
      var _anglemoveInner = 0;
      function touch(event) {
        // var event = event || window.event; //兼容 ie8
        switch (event.type) {
          case "touchstart":
            // console.log(event);
            //记录触点初始位置
            startX = event.touches[0].pageX;
            startY = event.touches[0].pageY;
            _anglemoveOuter = anglemoveOuter;
            _anglemoveInner = anglemoveInner;
            // console.log(this);
            if (this.parentNode.getAttribute('class') == "outer-nav") {
              this.parentNode.style[transform] = "rotate(" + (-_anglemoveOuter) + "deg)";
            } else {
              this.parentNode.style[transform] = "rotate(" + (-_anglemoveInner) + "deg)";
            };
            // console.log(startX,startY);
            break;
          case "touchend":
            var _thisPar = this.parentNode.querySelectorAll("span");
            if (this.parentNode.getAttribute('class') == "outer-nav") {
              if (anglemoveOuter < 0) {
                anglemoveOuter = 0
              } else if (anglemoveOuter >= 18 * (_thisPar.length - 5)) {
                anglemoveOuter = 18 * ((_thisPar.length - 5) > 0 ? (_thisPar.length - 5) : 0)
              }
              // 外圈旋转
              this.parentNode.style[transform] = "rotate(" + (-anglemoveOuter) + "deg)";
              // 文字圈旋转
              for (var i = 0; i < _thisPar.length; i++) {
                _thisPar[i].style[transform] = "rotate(-" + ((9 + i * 18) - anglemoveOuter) + "deg)";
              };
            } else {
              if (anglemoveInner < 0) {
                anglemoveInner = 0
              } else if (anglemoveInner >= 30 * (_thisPar.length - 3)) {
                anglemoveInner = 30 * ((_thisPar.length - 3) > 0 ? (_thisPar.length - 3) : 0)
              }
              this.parentNode.style[transform] = "rotate(" + (-anglemoveInner) + "deg)";
              for (var i = 0; i < _thisPar.length; i++) {
                _thisPar[i].style[transform] = "rotate(-" + ((15 + i * 30) - anglemoveInner) + "deg)";
              };
            }
            break;
          case "touchmove":
            moveX = event.touches[0].pageX;
            moveY = event.touches[0].pageY;
            var angleStart = 180 / Math.PI * Math.atan2((w - startX), (h - startY));
            var angleEnd = 180 / Math.PI * Math.atan2((w - moveX), (h - moveY));
            // console.log(angleStart,angleEnd);
            // console.log(moveX,moveY);
            var _thisPar = this.parentNode.querySelectorAll("span");
            if (this.parentNode.getAttribute('class') == "outer-nav") {
              anglemoveOuter = angleEnd - angleStart + _anglemoveOuter;
              // console.log(anglemoveOuter)
              // console.log(_anglemoveOuter);
              var anglemoveOuterLi = anglemoveOuter % 18;
              // 设置外圈一格一格转动
              if (Math.abs(anglemoveOuterLi) <= 18 * 0.5) {
                anglemoveOuter = anglemoveOuter - anglemoveOuterLi
              } else if (Math.abs(anglemoveOuterLi) > 18 * 0.5) {
                anglemoveOuter = anglemoveOuter - anglemoveOuterLi + 18 * anglemoveOuter / Math.abs(anglemoveOuter)
              }
              // 处理转动超出范围
              if (anglemoveOuter < 0 && anglemoveOuter > -10) {
                anglemoveOuter
              } else if (anglemoveOuter <= -10) {
                anglemoveOuter = -10
              } else if (anglemoveOuter > 18 * (_thisPar.length - 5) && anglemoveOuter < 18 * (_thisPar.length - 5) + 10) {
                anglemoveOuter
              }
              else if (anglemoveOuter >= 18 * (_thisPar.length - 5) + 10) {
                anglemoveOuter = 18 * ((_thisPar.length - 5) > 0 ? (_thisPar.length - 5) : 0) + 10
              }
              // 外圈旋转
              this.parentNode.style[transform] = "rotate(" + (-anglemoveOuter) + "deg)";
              // 文字圈旋转
              for (var i = 0; i < _thisPar.length; i++) {
                _thisPar[i].style[transform] = "rotate(-" + ((9 + i * 18) - anglemoveOuter) + "deg)";
              };
              break;
            } else {
              anglemoveInner = angleEnd - angleStart + _anglemoveInner;
              var anglemoveInnerLi = anglemoveInner % 30;
              // 设置内圈一格一格转动
              if (Math.abs(anglemoveInnerLi) <= 30 * 0.5) {
                anglemoveInner = anglemoveInner - anglemoveInnerLi
              } else if (Math.abs(anglemoveInnerLi) > 30 * 0.5) {
                anglemoveInner = anglemoveInner - anglemoveInnerLi + 30 * anglemoveInner / Math.abs(anglemoveInner)
              }
              // 处理转动超出范围
              if (anglemoveInner < 0 && anglemoveInner > -10) {
                anglemoveInner
              } else if (anglemoveInner <= -10) {
                anglemoveInner = -10
              } else if (anglemoveInner > 30 * (_thisPar.length - 3) && anglemoveInner < 30 * (_thisPar.length - 3) + 10) {
                anglemoveInner
              } else if (anglemoveInner > 30 * (_thisPar.length - 3) + 10) {
                anglemoveInner = 30 * ((_thisPar.length - 3) > 0 ? (_thisPar.length - 3) : 0) + 10
              }
              this.parentNode.style[transform] = "rotate(" + (-anglemoveInner) + "deg)";
              for (var i = 0; i < _thisPar.length; i++) {
                _thisPar[i].style[transform] = "rotate(-" + ((15 + i * 30) - anglemoveInner) + "deg)";
              };
              break;
            }
        }
      }
    }
  },
  mounted() {
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
      }, false);
    }
    this.roateMove();
  }
};
</script>
<style scoped lang="scss">
#circle-plus {
  width: 46px;
  height: 46px;
  background: #6cb7f8;
  position: fixed;
  z-index: 666;
  bottom: 116px;
  right: 10px;
  border-radius: 100%;
  box-shadow: -2px 6px 6px rgba($color: #000000, $alpha: 0.1);
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
}
#circle-plus span {
  background: #fff;
  position: absolute;
}
#circle-plus span.heng {
  width: 30px;
  height: 2px;
  left: 8px;
  top: 22px;
}
#circle-plus span.shu {
  width: 2px;
  height: 30px;
  left: 22px;
  top: 8px;
}

#circle-nav {
  width: 580px;
  height: 580px;
  position: fixed;
  right: -290px;
  background: #eee;
  bottom: -246px;
  border-radius: 100%;
  display: none;
  z-index: 66;
  opacity: 0;
}
#circle-nav .outer-nav {
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background: #f6f6f6;
  background-size: 100%;
  box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.05);
  display: block;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
}
#circle-nav .outer-nav li {
  width: 580px;
  height: 54px;
  position: absolute;
  text-align: center;
  left: 0;
  opacity: 0;
  top: 263px;
  z-index: 99999;
}
#circle-nav .outer-nav li a {
  width: 54px;
  height: 54px;
  background: #fff;
  display: block;
  float: left;
  border-radius: 100%;
  margin-left: 18px;
  box-shadow: 0 0 32px rgba($color: #000000, $alpha: 0.1);
}
#circle-nav .outer-nav li a span {
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 16px;
  color: #ccc;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
}
#circle-nav .inner-nav {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 100%;
  background: #ddd;
  background-size: 100%;
  top: 15%;
  left: 15%;
  box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1);
  display: block;
  z-index: 666999;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
}
#circle-nav .inner-nav li {
  width: 420px;
  height: 54px;
  position: absolute;
  text-align: center;
  left: 0rem;
  top: 183px;
  opacity: 0;
  z-index: 99999;
}
#circle-nav .inner-nav li a {
  width: 54px;
  height: 54px;
  background: #fff;
  display: block;
  float: left;
  border-radius: 100%;
  margin-left: 12px;
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
  box-shadow: 0 0 16px rgba($color: #000000, $alpha: 0.1);
}
#circle-nav .inner-nav li a span {
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 16px;
  color: #999;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
}
</style>
